<template>
    <div class="main song">
        <div class="songTop">
            <el-input v-model="keyWord" placeholder="请输入搜索关键词"></el-input>
            <el-button class="searchBtn">搜索</el-button>
            <el-button type="danger">删除</el-button>
        </div>
        <div class="songList">
            <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                width="80">
                <template slot="header" slot-scope="scope">
                    <el-checkbox v-model="selectAll" @change="SelectAll">全选</el-checkbox>
                </template>
                <template slot-scope="scope">
                    <el-checkbox v-model="scope.row.isSelect" @change="selectOne(scope.row)" class="check"></el-checkbox>
                </template>
                </el-table-column>

                <el-table-column
                label="歌曲名"
                width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.name }}</span>
                </template>
                </el-table-column>

                <el-table-column
                label="专辑图片"
                width="120">
                <template slot-scope="scope">
                    <el-image
                        style="width: 70px; height: 70px"
                        :src="scope.row.pic"
                        lazy
                        :preview-src-list="[scope.row.pic]">
                    </el-image>
                </template>
                </el-table-column>

                <el-table-column
                label="歌手"
                width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.artist }}</span>
                </template>
                </el-table-column>

                <el-table-column
                label="时长"
                width="180">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.songTimeMinutes }}</span>
                </template>
                </el-table-column>

                <el-table-column
                label="播放量"
                width="180">
                <template slot-scope="scope">
                    <span>{{ scope.row.playMp3Num }}</span>
                </template>
                </el-table-column>

                <el-table-column label="操作">
                <template slot-scope="scope">

                    <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">
                    编辑
                    </el-button>

                    <el-button
                    size="mini"
                    :type="scope.row.status == 0 ? 'warning' : 'primary'"
                    @click="handleHide(scope.$index, scope.row)">
                        {{scope.row.status == 0 ? '禁用' : '启用'}}
                    </el-button>
                </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="total>0" class="Page">
                <el-pagination
                background
                :page-sizes="[10, 20, 50]"
                :page-size="this.limit"
                layout="sizes, prev, pager, next"
                :total="total"
                @current-change="change"
                @size-change="chargeLimit">
                </el-pagination>
        </div>
    </div>
</template>

<script>
import { SongList } from '../../api/song.js'
export default {
name:"Song",
data(){
    return {
        limit:10,
        page:1,
        tableData: [],
        selectAll:false,
        total:0,
        keyWord:'',
        // sort:'desc'
    }
},
created(){
    this.getSongList();
},
methods:{
    handleEdit(index, row) {
        console.log(index, row);
    },
    handleHide(index, row) {
        console.log(index, row);
    },
    getSongList(){
        SongList({
            limit:this.limit,
            page:this.page,
            type:'mp3',
            // sort:this.sort
        }).then(res=>{
            res.data.list.forEach(c=>{
                c.isSelect = false;
            })
            this.tableData = res.data.list
            this.total = res.data.total
        })
    },
    SelectAll(){
        this.tableData.forEach(c=>{
            c.isSelect = this.selectAll
        })
    },
    selectOne(scope){
        scope.isSelect = scope.isSelect;
        let all = true;
        this.tableData.forEach(c=>{
            if(!c.isSelect){
                all = false;
            }
        })
        this.selectAll = all;
    },
    change(index){
        this.page = index;
        this.getSongList();
    },
    chargeLimit(limit){
        this.limit = limit;
        this.page = 1;
        this.getSongList();
    },
    search(){

    }
}
}
</script>

<style lang="less" scoped>
.song{
    position: relative;
    height: auto;
    padding-bottom: 70px;
    .songTop{
        height: 50px;
    }
    .songList{
        .check{
            margin-left: -35px;
        }
    }
    .Page{
        position: absolute;
        left: 50%;
        bottom: 0px;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        height: 80px;
    }
    //修改elment样式
    img{
        width: 50px;
        height: 50px;
    }
    /deep/.el-table .cell{
        text-align: center !important;
    }
    .el-input{
        width: 250px;
    }
    .searchBtn{
        background: #358dff;
        margin-left: 20px;
        color: white;
    }
}
</style>